<template>
  <div class="login-container">
    <!-- 走马灯 -->
    <div class="carouse-form" :inline="true" overflow:hidden>
      <el-carousel :interval="2000" height="680px">
        <el-carousel-item v-for="item in carouseImage" :key="item">
          <el-image
            style="border-radius: 20px"
            fit="fits"
            :src="item"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 登录 -->
    <div class="login-form">
      <el-form :model="loginForm" :rules="rules" ref="loginRef">
        <div class="title-container">
          <h1 class="title">猪猪学习系统</h1>
        </div>
        <el-form-item
          style="margin-left: 20px"
          class="form-item"
          label="账号"
          prop="account"
        >
          <el-input
            :prefix-icon="User"
            placeholder="请输入账号"
            v-model="loginForm.account"
          ></el-input>
        </el-form-item>
        <el-form-item
          style="margin-left: 20px"
          class="form-item"
          label="密码"
          prop="password"
        >
          <el-input
            :prefix-icon="Lock"
            placeholder="请输入密码"
            v-model="loginForm.password"
          />
        </el-form-item>

        <!-- 登录按钮 -->
        <el-button
          type="primary"
          :loading="loading"
          style="width: 90%; margin: 10px auto; margin-left: 20px"
          @click="LoginForm()"
          >登录</el-button
        >
        <el-button
          type="info"
          style="width: 90%; margin-left: 20px"
          @click="register()"
          >新用户注册</el-button
        >
        <div style="margin-left: 340px; margin-top: 20px">
          <el-link
            :underline="false"
            type="primary"
            @click="handleForgetPass()"
            >忘记密码？</el-link
          >
        </div>

        <!-- 链接 -->
        <div class="top" style="text-align: center">
          <el-link type="primary" style="margin: 0px 8px">用户协议</el-link>
          <el-link type="primary" style="margin: 0px 8px">隐私条款</el-link>
        </div>
      </el-form>
    </div>
    <el-dialog title="忘记密码" v-model="forgetPassDialogVis" width="30%">
      <el-form
        ref="PasswordFormRef"
        :rules="PasswordRules"
        :model="forgetUserForm"
        label-width="80px"
        style="padding-right: 20px"
      >
        <el-form-item label="账号" prop="account">
          <el-input
            v-model="forgetUserForm.account"
            autocomplete="off"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="forgetUserForm.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="forgetPassDialogVis = false">取消</el-button>
          <el-button type="primary" @click="resetPassword()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>



<script>
import { User, Lock } from "@element-plus/icons-vue";
import { login, ResetPassword } from "../api/index";
import img1 from "../assets/img/3c1d5af0473e9397d031820ec169dcca.jpg";
import img2 from "../assets/img/71f92580d3b11b3f049de67be788e185.jpeg";
import img3 from "../assets/img/75cf4c51f2a45d806f424d9d6b6985d1.jpg";
import img4 from "../assets/img/97b65ecf12a8f9173c75ad21044081fd.jpg";
import img5 from "../assets/img/9f6ec2a1cb32d454759e48c83c81190e.jpg";
import img6 from "../assets/img/b0fb504d8ba41631df82c0ec76f5be6f.jpg";
export default {
  //背景颜色
  beforeCreate() {
    window.document.body.setAttribute("style", "background-color:black");
  },
  data() {
    return {
      forgetUserForm: {
        account:"",
        phone:""
      }, //忘记密码的表单数据
      carouseImage: [img1, img2, img3, img4, img5, img6],
      loading: false,
      forgetPassDialogVis: false,
      loginForm: {
        account: "",
        password: "",
      },
      PasswordRules:{
        account:[
          {
            required:true,
            message:"请输入账号",
            trigger:"blur"
          },
        ],
        phone:[
          {
            required:true,
            message:"请输入手机号",
            trigger:"blur"
          }
        ]
      },
      rules: {
        account: [
          {
            required: true,
            message: "请输入账号",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur",
          },
        ],
      },
      User,
      Lock,
    };
  },
  methods: {
    LoginForm() {
      this.$refs["loginRef"].validate((valid) => {
        if (valid) {
          login(this.loginForm).then((response) => {
            console.log(response);
            if (response.code == "200") {
              console.log("登录成功返回数据" + response);
              this.$message.success("登录成功");
              this.$router.push("/home");
              window.document.body.removeAttribute("style");
              localStorage.setItem("user", JSON.stringify(response.data)); //存储用户数据
            } else {
              this.$message.error(response.message);
            }
          });
        }
      });
    },
    register() {
      this.$router.push("/register");
    },
    resetPassword(){
      this.$refs["PasswordFormRef"].validate((valid)=>{
        if(valid){
          ResetPassword(this.forgetUserForm).then((res)=>{
            console.log(res);
            if(res.code==="200"){
              console.log("修改成功");
              this.$message.success("密码已重置为123");
              this.forgetPassDialogVis = false;
            }else{
              
              this.$message.error(res.message);
            }
          })
        }
      })
    },
    handleForgetPass(){   //初始化表单数据
      this.forgetUserForm = {};
      this.forgetPassDialogVis = true;
    }
  },
};
</script>

<style lang="scss">
.el-input {
  //组合行内于块级

  height: 40px;
  width: 92%;
}
.top {
  margin-top: 260px;
}
</style>

<style lang="scss" scoped>
//登录内容样式
.login-container {
  height: 750px;
  width: 80%;
  margin: 100px auto 0px;
  //边框

  background-color: #eaecf0;

  border-radius: 10px;

  //走马灯样式
  .carouse-form {
    width: 67%;
    margin-top: 55px;
    margin-left: 22px;

    //边框
    float: left;
  }
  //登录表单样式
  .login-form {
    width: 28%;
    height: 630px;
    background-color: #eaecf0;
    float: left;
    margin: 55px 0px 0px 22px;
    //边框圆角
    border-radius: 20px;
    border: 2px solid black;

    .title-container {
      position: relative;

      .title {
        font-size: 26px;
        color: black;
        margin: 15px auto 40px auto;
        text-align: center;
        font-weight: bold;
      }
    }
  }
}
</style>
<style>
.el-form-item__label {
  font-weight: bold;
}
</style>

